import React, { Component } from 'react';
import {
    Image,
    View,
    Dimensions,
    StyleSheet,
    Platform,
    ScrollView 
} from 'react-native';
import STRING from '../../const_string_zh_CN';
import URL from '../../net/url.js';
import { NavigationActions } from 'react-navigation'
import { connect } from 'react-redux';
import { Container, Thumbnail, Text, Button, Icon, Body, List, ListItem,Content,Spinner } from 'native-base';
const { width, height } = Dimensions.get('window');
const marginTop = Platform.OS === 'ios' ? 20 : 0;
// var getSubjectOptionInfo_URL = ' http://202.114.33.116:8080/interactionServer/mooc/lesson/getSubjectOptionInfo';
 class question_student_before extends Component {
     

    //js组件的构造函数，js的生命周期
    constructor(props) {
        super(props);
        //state内部维护的一个状态，我们刚开始进来的为空，来加载空的view
        this.state = {
            content: null,
        };
    }
    render() {
        const {  subject } = this.props;
        const { navigate } = this.props.navigation;

       if (!this.state.content) {
            return this.renderLoadingView();
        }
        return (           
            <Container>
          <ScrollView  ref={(scrollView) => { _scrollView = scrollView; }}>
                <View style={StyleSheet.flatten(styles.view)} >
                     <ListItem button  >
                        <Icon name='ios-paper-outline' />
                        <Body>
                            <Text style={StyleSheet.flatten(styles.text_style)}>{subject.ObjectTitleAnswerList}</Text>
                        </Body>
                    </ListItem>          
                    <List dataArray={this.state.content} 
                        renderRow={(item) =>
                            <ListItem style={StyleSheet.flatten(styles.ListItem)}>
                                <Text style={StyleSheet.flatten(styles.text_style)}>{item.optionTitle}:</Text>
                                <Text style={StyleSheet.flatten(styles.text_style)}>{item.optionContent}</Text>
                            </ListItem>
                        } >
                    </List>
                </View>
               
            </ScrollView>
            </Container>

        );
    }
     //加载等待的view
    renderLoadingView() {
        return (
            <Container>
                <Content>
                    <Spinner color='green' />
                </Content>
            </Container>
        );
    }
    //rn的生命周期，初始化的时候会执行
    componentDidMount() {
        //去拉取电影的接口的数据
        this.fetchData();
    }
    //这个是js的访问网络的方法
    fetchData() {
        const {  subject } = this.props;
        console.log(' subject_id'+ subject.ObjectIdAnswerList);
        let map = {
            method: 'GET',
            headers: { 'subjectID': subject.ObjectIdAnswerList  },
            follow: '20',
            timeout: '0',
            size: '0',
        };
        fetch(URL.getSubjectOptionInfo_URL, map).then(
            (result) => {
                result.json().then(
                    (obj) => {
                        console.log(obj);
                        this.setState({
                            content: obj,
                        });
                    }
                ).catch(
                    (error) => {
                        console.log(error);
                    }
                    )
            }
        ).catch((error) => { console.log('error:' + error); });
    }
}
const styles = StyleSheet.create({
    button_default: {
        marginTop: 40,
        width: width / 4,
        height: 30,
        alignSelf: 'center',
        backgroundColor: '#F0AD4E',
    },
    Content: {
        marginTop: 15,
        // backgroundColor:'white',    
    },
    ListItem: {
        paddingLeft: 60,
        height: 40,
        
    },
    text_style: {
        //fontFamily:'微软雅黑',
        fontSize: 15,
        color: '#353535',
        marginLeft:10
        // paddingLeft:15, style={{marginLeft:10}}
    },
    view: {
        marginTop: 15,
        backgroundColor: 'white',
        borderBottomWidth: 0.2,
        borderBottomColor: "#cac0c0",
    },
    marginLeft: {
        marginLeft:10
    },
});
function mapStateToProps(state) {
    return {
        subject:state.intercation_question_before.ObjectAnswerListStu
    }
}

function mapDispatchToProps(dispatch) {
    return {
    }
}

const QuestionStudentBefore = connect(
    mapStateToProps,
    mapDispatchToProps
)(question_student_before)

export default QuestionStudentBefore;
